<!-- 设备信息弹窗 -->
<template>
  <el-dialog
    title="设备信息"
    :visible="visible"
    width="550px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      label-width="100px">

      <el-form-item
        label="设备编号:"
        prop="device_no">
        <el-input
          :maxlength="20"
          v-model="form.device_no"
          placeholder="请输入设备编号"
          disabled/>
      </el-form-item>

      <el-form-item
        label="井号:"
        prop="name">
        <el-input
          :maxlength="20"
          v-model="form.name"
          placeholder="请输入井号"
          disabled/>
      </el-form-item>

      <el-form-item
        label="设备类型:"
        prop="device_type">
        <el-input
          :maxlength="20"
          v-model="form.device_type"
          placeholder="请输入设备类型"
          disabled/>
      </el-form-item>

      <el-form-item
        label="安装位置:"
        prop="address">
        <el-input
          :maxlength="20"
          v-model="form.address"
          placeholder="请输入安装位置"
          disabled/>
      </el-form-item>

      <el-form-item
        label="状态:"
        prop="status">
        <el-select
          disabled
          v-model="form.status"
          placeholder="请选择状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <div style="margin-bottom: 10px">
        <el-divider></el-divider>
      </div>

      <el-form-item
        label="运行频率:"
        prop="run_pinlv">
        <el-input
          :maxlength="20"
          v-model="form.run_pinlv"
          placeholder="请输入运行频率"
          disabled>
          <span slot="suffix">Hz</span>
        </el-input>
      </el-form-item>

      <el-form-item
        label="产水:"
        prop="chanshui">
        <el-input
          :maxlength="20"
          v-model="form.chanshui"
          placeholder="请输入产水"
          disabled>
          <span slot="suffix">m³/h</span>
        </el-input>
      </el-form-item>

      <el-form-item
        label="相对高差:"
        prop="xiangdui_high">
        <el-input
          :maxlength="20"
          v-model="form.xiangdui_high"
          placeholder="请输入相对高差"
          disabled>
          <span slot="suffix">MPa</span>
        </el-input>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>

export default {
  name: 'DeviceInfo',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      options: [
        { label: '在线', value: 1 },
        { label: '离线', value: 2 },
      ],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post('/device/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>
